<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-left">
        
        <a-form
          :model="formState"
       ref="loginFormRef"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          autocomplete="off"
          @finish="onLogin"
          @finishFailed="onFinishFailed"
        >
          <a-form-item
            label="用户名"
            name="username"
            :rules="[{ required: true, message: '请输入用户名！' }]"
          >
            <a-input v-model:value="formState.username" />
          </a-form-item>

          <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: '请输入密码！' }]"
          >
            <a-input-password v-model:value="formState.password" />
          </a-form-item>
         
          <Vcode :show="isShow" @success="onSuccess" @close="onClose"/>
          <a-form-item :wrapper-col="{ offset: 6, span: 18 }">
            <a-button type="primary" html-type="submit">登录</a-button>
          </a-form-item>
          <a href="#" class="forgot-password">忘记密码？</a>
        </a-form>
      </div>
      <div class="login-right">
        <h2>Hello, Friend!</h2>
        <p>Enter your personal details and start journey with us</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import { imageCode, login ,loginByPhone} from '@/api/login';
import { useRouter } from 'vue-router';
import Vcode from "vue3-puzzle-vcode";
import { encryptStr } from '@/utils/encryption';
const userStore = useUserStore();
const router = useRouter();
const loginFormRef = ref();
const formState = reactive({
  username: 'admin',
  password: '111',
  remember: true,
});
let url = ref('');
const isShow = ref(false);
const onShow = () => {
    isShow.value = true;
  };
const onClose = () => {
  isShow.value = false;
};
const onSuccess = () => {
  // values.mobile="19952412984";
  // values.code="123";
  // //values.password = encryptStr(values.password);
   onClose(); // 验证成功，手动关闭模态框
   login(formState).then(res => {
     userStore.login(res.data);
     router.push("/home");
     
   });
   
};

const onLogin = async () => {
  const valid = await loginFormRef.value.validate();
  if (!valid) {
    return;
  }
  onShow()

};

//

const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};

onMounted(() => {
  var dateStr = "20241128090312";
  console.log(dateStr);
  var data = [];
  for (let i = 0; i < dateStr.length / 2; i++) {
    var item = dateStr.substr(i * 2, 2);
    console.log(item);
    console.log(parseInt("111", 2));
    data.push(parseInt(dateStr.substr(i * 2, 2), 16));
  }
  console.log(data);
});


</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
}

.login-box {
  display: flex;
  width: 60%; /* 增加整体宽度 */
  height: 60%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.login-left {
  flex: 1;
  background-color: #fff;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-left a-form {
  width: 100%;
  max-width: 400px; /* 限制表单最大宽度 */
}

.login-left :deep(.ant-input),
.login-left :deep(.ant-input-password) {
  width: 100%;
  font-size: 16px; /* 增大字体 */
}

.login-left :deep(.ant-form-item-label) {
  padding-right: 10px; /* 调整标签与输入框的间距 */
}

.login-left .ant-btn-primary {
  width: 100%;
  height: 40px;
  font-size: 16px;
}

.login-right {
  flex: 1;
  background-color: #000;
  color: #fff;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.forgot-password {
  display: block;
  text-align: center;
  margin-top: 10px;
  color: #333;
  text-decoration: underline;
}
</style>